<style lang="less" scoped>
  @import "../assets/less/fn";
  .page1 {
    height: 100%;
    background-image: url(http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd2924ab69_small.png);
    background-size: cover;
    background-position: 50% 50%;
  }

  .main {
    width: 100%;
    height: 100%;
  }

  #audio_btn {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 200;
    display: none;
    width: 30rem*2.1/@font-size-base;
    height: 30rem*2.1/@font-size-base;
    background-repeat: no-repeat;
  }

  .rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
  }
  @-webkit-keyframes rotating {
    from {
      -webkit-transform: rotate(0deg)
    }

    to {
      -webkit-transform: rotate(360deg)
    }
  }

  @keyframes rotating {
    from {
      transform: rotate(0deg)
    }

    to {
      transform: rotate(360deg)
    }
  }

  @-moz-keyframes rotating {
    from {
      -moz-transform: rotate(0deg)
    }

    to {
      -moz-transform: rotate(360deg)
    }
  }
  .loading{top:0;z-index:9999;width:100%;height:100%; }
  .loading .loadbox{position:relative;display:block;
    margin:50% auto 0;width:160rem*2.1/@font-size-base;
    height:160rem*2.1/@font-size-base;}
  .loading .loadlogo{margin:11px auto;width:146rem*2.1/@font-size-base;height:146rem*2.1/@font-size-base;border-radius:50%;background-position:center center;background-size:cover;background-repeat:no-repeat}
  .loadbg{position:absolute;top:-7px;
    z-index:1000;width:100%;height:100%;
    background:url(http://xingfuu.com/assets/images/loading.png) no-repeat;
    background-size:100%;
    animation: rotating 2s ease 0s 100 both;
  }
  @keyframes myrotate{
    form {transform:rotateX(0deg);}
    to    {transform:rotateX(180deg);}
  }
  @-webkit-keyframes myrotate{/* Safari and Chrome */
    form {transform:rotateX(0deg);}
    to    {transform:rotateX(180deg);}
  }

  .app52kiss-lip{position: absolute; left: 15px; top: 20px; width: 88.5px; height: 63px; background: url('http://xingfuu.com/assets/images/app52/kiss.png') no-repeat; background-size: 88.5px 63px; border-radius: 4px; opacity: 0;}
  .loadlogo {
    margin: 11px auto;
    width: 146px;
    height: 146px;
    border-radius: 50%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .off {
    background-image: url(../assets/normalmusic.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  @-webkit-keyframes wobble {
    0% {
      -webkit-transform: none;
      transform: none
    }

    15% {
      -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
      transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
      -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
      transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
      -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
      transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
      -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
      transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
      -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
      transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
    }

    100% {
      -webkit-transform: none;
      transform: none
    }
  }

  @keyframes wobble {
    0% {
      -webkit-transform: none;
      transform: none
    }

    15% {
      -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
      transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
      -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
      transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
      -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
      transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
      -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
      transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
      -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
      transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
    }

    100% {
      -webkit-transform: none;
      transform: none
    }
  }

  .wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
  }
  .title{
    width: 230rem*2.1/@font-size-base;
    position: absolute;margin:21.5rem*2.1/@font-size-base auto;left: 0;right: 0;z-index: 6;
    height: 96rem*2.1/@font-size-base;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: wobble 2s ease 3s 1 both;
  }
  .baby-photo-border{
    width: 290rem*2.1/@font-size-base;
    height: 333rem*2.1/@font-size-base;
    position: absolute;margin: 88.5rem*2.1/@font-size-base auto;z-index: 4;left: 0px;right: 0px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: zoomIn 2s ease 3s 1 both;
  }
  .baby-photo-withe{
    width: 345rem*2.1/@font-size-base;
    height: 402rem*2.1/@font-size-base;
    position: absolute;margin: 58.5rem*2.1/@font-size-base auto;z-index: 4;left: 0px;right: 0px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: zoomIn 2s ease 3s 1 both;
  }
  .baby-photo{
    width: 152rem*2.1/@font-size-base;;
    height: 271rem*2.1/@font-size-base;;
    position: absolute;margin: 128.5rem*2.1/@font-size-base auto;z-index:999;left: 0px;right: 0px;
    border-radius: 29px;
    /*transform: none;*/
    /*box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;*/
    animation: rotateIn 2s ease 3s 1 both;
  }
  .banner-butom{
    width: 110%;
    height: 151rem*2.1/@font-size-base;
    margin-top:75rem*2.1/@font-size-base ;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: fadeInUp 2s ease 3s 1 both;
    position: absolute;z-index: 5;left: 0px;right: 0px;
  }

  .banner-wawa{
    width: 72rem*2.1/@font-size-base;;
    height: 93rem*2.1/@font-size-base;;
    position: absolute;margin: 457.5rem*2.1/@font-size-base 72%;z-index: 8;left: 0px;right: 0px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: fadeInRight 2s ease 4s 1 both;
  }

  .baby-keyword{
    width: 194rem*2.1/@font-size-base;;
    height: 69rem*2.1/@font-size-base;;
    font-size: 35rem/@font-size-base;
    position: absolute;margin: 457.5rem*2.1/@font-size-base 5%;z-index: 7;left: 0px;right: 0px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: fadeInLeft 2s ease 4s 1 both;
  }

  .banner-fly{
    width: 122rem*2.1/@font-size-base;;
    height: 89rem*2.1/@font-size-base;;
    position: absolute;margin: 467.5rem*2.1/@font-size-base 62%;z-index: 7;left: 0px;right: 0px;
  }

  .container{
    display: flex;
    display: -webkit-flex;
    min-height: 100vh;
    flex-direction: column;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    overflow: hidden;
  }

  header,footer{
    height: 192rem*2.1/@font-size-base;;
    line-height: 100px;
    color: #fff;
  }

  .middle{
    flex: 1;

  }

  /*2*/

  .title2{
    width: 142rem*2.1/@font-size-base;
    position: absolute;margin:41.5rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:6;
    height: 61rem*2.1/@font-size-base;
  }
  .candy2{
    width: 85rem*2.1/@font-size-base;
    height: 81rem*2.1/@font-size-base;
    position: absolute;margin:47.5rem*2.1/@font-size-base 0.5rem;left: 0;right: 0;z-index:6;
    transform: none;
    transition: padding .5s;
    animation: swing 1s ease 0s infinite both;
  }
  .title2-text{
    width: 142rem*2.1/@font-size-base;
    height: 61rem*2.1/@font-size-base;
    position: absolute;margin:59.5rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  9;
    font-size: 35rem/@font-size-base;; color: #f57ca2;
  }
  .border2{
    width: 314rem*2.1/@font-size-base;
    height: 408rem*2.1/@font-size-base;
    position: absolute;
    margin:77.5rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  3;
    animation: zoomIn 2s ease 0s 1 both;
  }
  .white2{
    width: 384rem*2.1/@font-size-base;
    height: 458rem*2.1/@font-size-base;
    position: absolute;
    margin:55.25rem*2.1/@font-size-base -11.25rem*2.1/@font-size-base;left: 0;right: 0;z-index:  2;
  }
  .content2{
     width:  244rem*2.1/@font-size-base;
     height: 208rem*2.1/@font-size-base;
     position: absolute;
     text-align: left;
     font-size: 30rem/@font-size-base; color: rgb(236, 124, 124);
     margin:130.25rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  2;
   }
  .content3{
    width:  214rem*2.1/@font-size-base;
    height: 208rem*2.1/@font-size-base;
    position: absolute;
    text-align: left;
    font-size:30rem/@font-size-base; color: rgb(122, 207, 201);
    margin:260.25rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  2;
  }
  .content4{
    width:  214rem*2.1/@font-size-base;
    height: 208rem*2.1/@font-size-base;
    position: absolute;
    text-align: left;
    font-size:35rem/@font-size-base; color: rgb(236, 124, 124);
    margin:360.25rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  2;
  }

  .title2-big{
    width:  204rem*2.1/@font-size-base;
    height: 87rem*2.1/@font-size-base;
    position: absolute;
    margin:50.25rem*2.1/@font-size-base 0.2rem;
    left: 0;right: 0;z-index:  8;
    transform: none;
    transition: padding .5s;
    animation: wobble 2s ease 0s infinite both;
    /*animation: swing 1s ease 0s infinite both;*/
  }

  /*3*/
  .content22-3{
     width:  209rem*2.1/@font-size-base;
     height: 258rem*2.1/@font-size-base;
     position: absolute;
     text-align: left;
     font-size: 30rem/@font-size-base; color: rgb(236, 124, 124);
     border-width:3.5rem*2.1/@font-size-base;
     border-style: dashed;
     border-color: rgb(252, 141, 141);
     padding-bottom: 0px;
     padding-top: 0px;
     border-radius: 35px;
     margin:140.25rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  2;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: bounceIn 2s ease 1s 1 both;
   }
  .content22-3-7{
    width:  181.95rem*2.1/@font-size-base;
    height: 258rem*2.1/@font-size-base;
    position: absolute;
    text-align: left;
    font-size: 30rem/@font-size-base; color: rgb(236, 124, 124);
    border-width:3.5rem*2.1/@font-size-base;
    border-style: dashed;
    border-color: rgb(252, 141, 141);
    padding-bottom: 0px;
    padding-top: 0px;
    border-radius: 35px;
    margin:140.25rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  2;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: bounceIn 2s ease 1s 1 both;
  }
  .content22-3-1{
    width:  209rem*2.1/@font-size-base;
    height: 128rem*2.1/@font-size-base;
    position: absolute;
    text-align: left;
    font-size: 30rem/@font-size-base; color: rgb(236, 124, 124);
    border-width:3.5rem*2.1/@font-size-base;
    border-style: dashed;
    border-color: rgb(252, 141, 141);
    padding-bottom: 0px;
    padding-top: 0px;
    border-radius: 35px;
    margin:120.25rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  2;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: bounceIn 2s ease 1s 1 both;
  }
  .content22-3-2{
    width:  209rem*2.1/@font-size-base;
    height: 138rem*2.1/@font-size-base;
    position: absolute;
    text-align: left;
    font-size: 30rem/@font-size-base; color: rgb(236, 124, 124);
    border-width:3.5rem*2.1/@font-size-base;
    border-style: dashed;
    border-color: rgb(252, 141, 141);
    padding-bottom: 0px;
    padding-top: 0px;
    border-radius: 35px;
    margin:280.25rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  2;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: bounceIn 2s ease 1s 1 both;
  }
  .content22-4{
    width:  224rem*2.1/@font-size-base;
    height: 137rem*2.1/@font-size-base;
    position: absolute;
    text-align: left;
    transform:rotate(9deg);
    -ms-transform:rotate(9deg); /* Internet Explorer */
    -moz-transform:rotate(9deg); /* Firefox */
    -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
    -o-transform:rotate(9deg); /* Opera */
    font-size: 30rem/@font-size-base; color: rgb(236, 124, 124);
    border-width:3.5rem*2.1/@font-size-base;
    border-style: dashed;
    border-color: rgb(252, 141, 141);
    padding-bottom: 0px;
    padding-top: 0px;
    border-radius: 35px;
    transform: none;
    text-align: left;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    animation: rotateIn 2s ease 0s 1 both;
    margin:120.25rem*2.1/@font-size-base auto;left: 0;right: 0;z-index:  2;
  }
  .content22-5{
     width:  99.1rem*2.1/@font-size-base;
     height: 135rem*2.1/@font-size-base;
     position: absolute;
     text-align: left;
     transform:rotate(9deg);
     -ms-transform:rotate(9deg); /* Internet Explorer */
     -moz-transform:rotate(9deg); /* Firefox */
     -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
     -o-transform:rotate(9deg); /* Opera */
     font-size: 30rem/@font-size-base; color: rgb(236, 124, 124);
     border-width:3.5rem*2.1/@font-size-base;
     border-style: dashed;
     border-color: rgb(252, 141, 141);
     padding-bottom: 0px;
     padding-top: 0px;
     border-radius: 35px;
     transform: none;
     text-align: left;
     box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
     margin:290.25rem*2.1/@font-size-base 18%;left: 0;right: 0;z-index:  2;
   }
  .content22-5-1{
    width:  99.1rem*2.1/@font-size-base;
    height: 135rem*2.1/@font-size-base;
    position: absolute;
    text-align: left;
    transform:rotate(9deg);
    -ms-transform:rotate(9deg); /* Internet Explorer */
    -moz-transform:rotate(9deg); /* Firefox */
    -webkit-transform:rotate(9deg); /* Safari 和 Chrome */
    -o-transform:rotate(9deg); /* Opera */
    font-size: 30rem/@font-size-base; color: rgb(236, 124, 124);
    border-width:3.5rem*2.1/@font-size-base;
    border-style: dashed;
    border-color: rgb(252, 141, 141);
    padding-bottom: 0px;
    padding-top: 0px;
    border-radius: 35px;
    transform: none;
    text-align: left;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    margin:290.25rem*2.1/@font-size-base 53%;left: 0;right: 0;z-index:  2;
  }
  .content22-6{
    width:  108rem*2.1/@font-size-base;
    height: 113rem*2.1/@font-size-base;
    position: absolute;
    text-align: left;
    font-weight: 400;
    font-size: 30rem/@font-size-base; color: rgb(236, 124, 124);
    margin:290.25rem*2.1/@font-size-base 54%;left: 0;right: 0;z-index:  2;
  }

</style>

<template>
  <div class="main p-index main phoneBox">
    <div id="loading" class="animated loading">
      <div class="loadbox">
        <div class="loadlogo" style="background-image: url('http://xingfuu.com/Uploads/pic/1/201806/5b3061df4977a.jpg');"></div>
        <div class="animated loadbg"></div>
      </div>
    </div>
    <swiper :options="swiperOption" ref="mySwiper" style="height: 100%">
      <!-- 1 -->
      <swiper-slide class="page1" style="width: 100%; height: 100%;overflow: hidden">
        <div class="edit_wrapper container">

          <div id="wrapper-background754781" style="width: 100%; height: 100%; background-image: url(&quot;http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd2924ab69_small.png&quot;); background-size: cover; background-position: 50% 50%;"></div>

          <div id="audio_btn" class="off aa video_exist rotate" style="display: block;">
          <div id="yinfu"></div>
            <audio  src="http://p9h3lexjs.bkt.clouddn.com/5b2b228d08df1.mp3" id="media" autoplay preload loop></audio>
            <audio src="" id="mediaa" autoplay="" preload=""></audio>
          </div>

          <!--<header>头部</header>-->
          <div class="middle">
            <img class="title" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd279f2de8.png">


            <img  ctype="4" class="baby-photo-border element comp_image editable-image"
                 src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd2a8a7138.png"
                 style="">
            <img class="baby-photo-withe element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd2b757923.png"
                 style="">

            <img  class="baby-photo element comp_image editable-image" src="../assets/1.jpg"
                 style="">

            <img class="banner-wawa element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd3a5b7b7c.png"
                 style="">

            <div  class="baby-keyword element comp_paragraph editable-text" style="">
              <span style="color: rgb(236, 124, 124); ">张正豪宝宝满月宴邀请</span><div>
              <span style="color: rgb(236, 124, 124);">2018年9月4日</span></div>
            </div>
          </div>
          <footer>
            <img  class="banner-butom element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd31fd1433.png"
                 style="">

          </footer>

        </div>

      </swiper-slide>
      <!--2-->
      <swiper-slide class="page1" style="width: 100%; height: 100%;overflow: hidden">
        <div class="edit_wrapper container">

          <div class="middle">

            <div class="title2-text" style="text-align: center;">
              <span>宴会致辞</span>
            </div>

            <img  ctype="4" class="title2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30504f36d1c.png">

            <img  ctype="4" class="swing animated  candy2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201805/5b0387b0b888e.png"
                   style="">

            <img  class="banner-fly element comp_image editable-image"
                 src="http://image.xingfuu.com/Uploads/pic/1/201806/5b3052c51c46d.png">

            <img  ctype="4" class="border2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30501c05079.png"
                 style="">

            <img  ctype="4" class="white2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30502966197.png">

            <div  ctype="2" class="content2 element comp_paragraph editable-text">
                <span>各位亲朋好友:
       张梦林，覃本七夫妇喜得孙子，在孙子满月之际，特邀各位亲朋好友及其家人前来庆贺，并在九江儒林阁海鲜酒楼备下薄酒几席，热烈欢迎各位的光临，并表示衷心的感谢!</span>
            </div>


            <div  ctype="2" class="content3 element comp_paragraph editable-text">
              <span >时间：2018年9月4日 18:30</span>
              <div><span >设席：儒林阁海鲜酒楼一楼大厅</span></div>
              <div><span >地址：九江儒林阁海鲜酒楼</span></div>
            </div>

            <div  ctype="2" class="content4 element comp_paragraph editable-text">
              <div style="text-align: center;"><span >爷爷张梦林 &amp; 奶奶覃本七</span></div>
              <div style="text-align: center; "><span >敬邀您</span></div>
              <div style="text-align: center; "><span >一起分享宝宝成长记忆</span></div>
            </div>



          </div>
          <footer>
            <img  ctype="4" class="animated title2-big element comp_image editable-image"
                 src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd279f2de8.png"
            >
            <img  ctype="4" class=" banner-butom element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd31fd1433.png"
                 style="">

          </footer>

        </div>

      </swiper-slide>
      <!--3-->
      <swiper-slide  class="page1" style="width: 100%; height: 100%;overflow: hidden">
        <div class="edit_wrapper container">

          <div class="middle">

            <div class="title2-text" style="text-align: center;">
              <span>宝宝留影</span>
            </div>

            <img  ctype="4" class="title2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30504f36d1c.png">

            <img  ctype="4" class="swing animated  candy2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201805/5b0387b0b888e.png"
                  style="">


            <img  ctype="4" class="border2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30501c05079.png"
                  style="">

            <img  ctype="4" class="white2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30502966197.png">


            <img ctype="4" class="content22-4 element comp_image editable-image"
                 src="../assets/7.jpg"
            >

            <img  ctype="4" class="content22-5 element comp_image editable-image"
                 src="../assets/1.jpg"
                 >

            <div  ctype="2" class="content22-6 element comp_paragraph editable-text">
              <span>张正豪宝宝邀请各位叔叔阿姨，哥哥姐姐一起来吃饭饭，一定要来哦 ！</span>
            </div>
          </div>
          <footer>
            <img  ctype="4" class="animated title2-big element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd279f2de8.png"
            >
            <img  ctype="4" class=" banner-butom element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd31fd1433.png"
                  style="">

          </footer>

        </div>
      </swiper-slide>
      <!--4-->
      <swiper-slide  class="page1" style="width: 100%; height: 100%;overflow: hidden">
        <div class="edit_wrapper container">

          <div class="middle">

            <div class="title2-text" style="text-align: center;">
              <span>我的大眼睛~</span>
            </div>

            <img  ctype="4" class="title2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30504f36d1c.png">

            <img  ctype="4" class="swing animated  candy2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201805/5b0387b0b888e.png"
                  style="">


            <img  ctype="4" class="border2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30501c05079.png"
                  style="">

            <img  ctype="4" class="white2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30502966197.png">


            <img  ctype="4" class=" content22-3-7 element comp_image editable-image"
                 src="../assets/9.jpg"
            >


          </div>
          <footer>
            <img  ctype="4" class="animated title2-big element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd279f2de8.png"
            >
            <img  ctype="4" class=" banner-butom element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd31fd1433.png"
                  style="">

          </footer>

        </div>
      </swiper-slide>

      <!--7-->
      <swiper-slide  class="page1" style="width: 100%; height: 100%;overflow: hidden">
        <div class="edit_wrapper container">

          <div class="middle">

            <div class="title2-text" style="text-align: center;">
              <span>宝宝第一天</span>
            </div>

            <img  ctype="4" class="title2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30504f36d1c.png">

            <img  ctype="4" class="swing animated  candy2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201805/5b0387b0b888e.png"
                  style="">


            <img  ctype="4" class="border2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30501c05079.png"
                  style="">

            <img  ctype="4" class="white2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30502966197.png">


            <img ctype="4" class="content22-4 element comp_image editable-image"
                 src="../assets/10.jpg"
            >

            <img  ctype="4" class="content22-5 element comp_image editable-image"
                  src="../assets/11.jpg"
            >

            <img  ctype="4" class="content22-5-1 element comp_image editable-image"
                  src="../assets/12.jpg"
            >
          </div>
          <footer>
            <img  ctype="4" class="animated title2-big element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd279f2de8.png"
            >
            <img  ctype="4" class=" banner-butom element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd31fd1433.png"
                  style="">

          </footer>

        </div>
      </swiper-slide>
      <!--5-->
      <swiper-slide  class="page1" style="width: 100%; height: 100%;overflow: hidden">
        <div class="edit_wrapper container">

          <div class="middle">

            <div class="title2-text" style="text-align: center;">
              <span>睡得可香哟</span>
            </div>

            <img  ctype="4" class="title2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30504f36d1c.png">

            <img  ctype="4" class="swing animated  candy2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201805/5b0387b0b888e.png"
                  style="">


            <img  ctype="4" class="border2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30501c05079.png"
                  style="">

            <img  ctype="4" class="white2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30502966197.png">


            <img  ctype="4" class=" content22-3-1 element comp_image editable-image"
                 src="../assets/3.jpg"
            >

            <img  ctype="4" class=" content22-3-2 element comp_image editable-image"
                 src="../assets/8.jpg"
            >

          </div>
          <footer>
            <img  ctype="4" class="animated title2-big element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd279f2de8.png"
            >
            <img  ctype="4" class=" banner-butom element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd31fd1433.png"
                  style="">

          </footer>

        </div>
      </swiper-slide>
      <!--6-->
      <swiper-slide  class="page1" style="width: 100%; height: 100%;overflow: hidden">
        <div class="edit_wrapper container">

          <div class="middle">

            <div class="title2-text" style="text-align: center;">
              <span>爱好 : 睡觉觉</span>
            </div>

            <img  ctype="4" class="title2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30504f36d1c.png">

            <img  ctype="4" class="swing animated  candy2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201805/5b0387b0b888e.png"
                  style="">


            <img  ctype="4" class="border2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30501c05079.png"
                  style="">

            <img  ctype="4" class="white2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30502966197.png">


            <img  ctype="4" class=" content22-3 element comp_image editable-image"
                 src="../assets/16.jpg"
            >


          </div>
          <footer>
            <img  ctype="4" class="animated title2-big element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd279f2de8.png"
            >
            <img  ctype="4" class=" banner-butom element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd31fd1433.png"
                  style="">

          </footer>

        </div>
      </swiper-slide>
      <!--8-->
      <swiper-slide class="page1" style="width: 100%; height: 100%;overflow: hidden">
        <div class="edit_wrapper container">

          <div class="middle">

            <div class="title2-text" style="text-align: center;">
              <span>宴会地址</span>
            </div>

            <img  ctype="4" class="title2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30504f36d1c.png">

            <img  ctype="4" class="swing animated  candy2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201805/5b0387b0b888e.png"
                  style="">

            <img  class="banner-fly element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b3052c51c46d.png">

            <img  ctype="4" class="border2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30501c05079.png"
                  style="">

            <img  ctype="4" class="white2 element comp_image editable-image" src="http://image.xingfuu.com/Uploads/pic/1/201806/5b30502966197.png">

            <div  ctype="2" class="content2 element comp_paragraph editable-text">
              <span>我们期待您的光临！</span>
            </div>


            <div  ctype="2" class="content3 element comp_paragraph editable-text">
              <span >时间：2018年9月4日 18:30</span>
              <div><span >设席：儒林阁海鲜酒楼一楼大厅</span></div>
              <div><span >地址：九江儒林阁海鲜酒楼</span></div>
            </div>

            <!--<div  ctype="2" class="content4 element comp_paragraph editable-text">-->
              <!--<div style="text-align: center;"><span >爷爷张梦林 &amp; 奶奶覃本七</span></div>-->
              <!--<div style="text-align: center; "><span >敬邀您</span></div>-->
              <!--<div style="text-align: center; "><span >一起分享宝宝成长记忆</span></div>-->
            <!--</div>-->



          </div>
          <footer>
            <img  ctype="4" class="animated title2-big element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd279f2de8.png"
            >
            <img  ctype="4" class=" banner-butom element comp_image editable-image"
                  src="http://image.xingfuu.com/Uploads/pic/1/201806/5b2cd31fd1433.png"
                  style="">

          </footer>

        </div>

      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
//    this.swiper.slideTo(3, 1000, false)
    },
    data () {
      return {
        swiperOption: {
          direction: "vertical",
//          loop: true,
          initialSlide:0,
//          lazy:true,
          // 如果需要分页器
          pagination: '.swiper-pagination',
//          lazyLoading : true,  //启动延迟加载
//          lazyLoadingInPrevNext : true,      //延迟加载应用到最接近的slide的图片
          lazyLoadingOnTransitionStart : true,  //过渡到slide一开始就加载，设置为true
          onInit: function (swiper) { //Swiper2.x的初始化是onFirstInit
          },
          onSlideChangeEnd: function (swiper) {
          }
        }
      }
    },
    methods: {
      jump(){
        this.$router.push({path: '/child'})
      }
    }
  }
</script>

